import React from 'react';
import './index.css';

export default class App extends React.Component {
  state = {
    // 用户名输入框
    username: '',
    // 评论内容
    content: '',
    // 评论列表: [ {id,name,content}]
    list: [
      {
        id: 1,
        username: '思聪',
        content: '想你的夜',
      },
      {
        id: 2,
        username: '马芸',
        content: '我对钱不感兴趣',
      },
      {
        id: 3,
        username: '王简林',
        content: '实现一个小目标',
      },
    ],
  };

  handleDel = (index) => {
    // console.log('index -----> ', index);
    // ❌不能直接修改原来的 list，所以不能用 splice,push 之类的方法

    // ✅新建数组再删除
    const newList = [...this.state.list];
    newList.splice(index, 1);
    this.setState({ list: newList });
  };

  handleChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };

  handleAdd = (e) => {
    // console.log('e -----> ', e);
    // 阻止了默认行为
    e.preventDefault();
    const { username, content, list } = this.state;
    if (!username.trim() || !content.trim()) {
      alert('评论人或者内容不能为空！');
      return;
    }
    // const obj = {
    //   id: +new Date(),
    //   username,
    //   content,
    // };
    // const newList = [obj, ...list];
    // this.setState({ list: newList });
    this.setState({
      list: [
        {
          id: +new Date(),
          username,
          content,
        },
        ...list,
      ],
      username: '',
      content: '',
    });
  };

  handleClear = () => {
    this.setState({ list: [] });
  };

  render() {
    return (
      <div className="app">
        {/* 表单提交的时候，运行发布评论的函数 */}
        <form>
          <input
            name="username"
            value={this.state.username}
            onChange={this.handleChange}
            className="user"
            type="text"
            placeholder="请输入评论人"
          />
          <br />
          <textarea
            name="content"
            value={this.state.content}
            onChange={this.handleChange}
            className="content"
            cols="30"
            rows="10"
            placeholder="请输入评论内容"
          />
          <br />
          <button onClick={this.handleAdd}>发表评论</button>
          <button type="button" onClick={this.handleClear}>
            清空评论
          </button>
        </form>
        <CommentList
          list={this.state.list}
          handleDel={this.handleDel}
        ></CommentList>
      </div>
    );
  }
}

// 1. 选中代码，右键 - 重构 - 提取到 'App'中的 method，重命名CommentList
// 2. 现在 CommentList 还是在 App中，需要再剪切到外面，改装成函数组件
// 3. App 中把函数组件 改造回来
// 4. 父组件通过标签属性(props)传递数据，子组件通过 形参 props 接收
// 5. 传了 list ，和 handleDel
// 6. 优化，直接对着形参 props 解构使用
function CommentList({ list, handleDel }) {
  // console.log('props -----> ', props);
  return (
    <ul>
      {list.length ? (
        list.map((item, index) => {
          return (
            <li key={item.id}>
              <h3>评论人: {item.username}</h3>
              <p>评论内容：{item.content}</p>
              <button onClick={() => handleDel(index)}>删除</button>
            </li>
          );
        })
      ) : (
        <div>暂无数据</div>
      )}
    </ul>
  );
}
